<template>
  <view class="fu-picker">
    <!-- 选择器主体 -->
    <fu-popup
      v-model:show="localVisible"
      position="bottom"
      :close-on-click-overlay="false"
      @click-overlay="onCancel"
    >
      <!-- 标题栏 -->
      <view class="fu-picker__header">
        <text 
          class="fu-picker__cancel"
          @click="onCancel"
        >取消</text>
        <text class="fu-picker__title">{{ title }}</text>
        <text 
          class="fu-picker__confirm"
          @click="onConfirm"
        >确定</text>
      </view>
      
      <!-- 选择器内容 -->
      <view class="fu-picker__body">
        <picker-view
          :value="currentValue"
          :style="{ height: '100%' }"
          :indicator-class="'fu-picker__indicator'"
          :mask-class="'fu-picker__mask'"
          @change="onChange"
          class="fu-picker__view"
        >
          <picker-view-column
            v-for="(column, index) in formatColumns"
            :key="index"
          >
            <view
              v-for="(item, i) in column"
              :key="i"
              class="fu-picker__item"
            >
              {{ getDisplayValue(item) }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </fu-popup>
  </view>
</template>

<script>
/**
 * fu-picker 选择器组件
 * @description 选择器组件，支持单列、多列选择
 * @property {Boolean} show - 是否显示选择器
 * @property {String} title - 选择器标题
 * @property {Array} columns - 选择器数据，单列为一维数组，多列为二维数组
 * @property {Array} value - 当前选中值的索引数组
 * @property {String} valueKey - 选项对象中，选项文字对应的键名
 * @event {Function} confirm - 点击确定按钮时触发
 * @event {Function} cancel - 点击取消按钮时触发
 * @event {Function} change - 选项改变时触发
 */
export default {
  name: 'fu-picker',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    },
    valueKey: {
      type: String,
      default: 'text'
    }
  },
  emits: ['update:show', 'confirm', 'cancel', 'change'],
  data() {
    return {
      currentValue: [],
      localVisible: false
    }
  },
  computed: {
    formatColumns() {
      // 处理单列数据，转换为二维数组格式
      if (!Array.isArray(this.columns)) return [[]]
      if (!Array.isArray(this.columns[0])) {
        return [this.columns]
      }
      return this.columns
    }
  },
  watch: {
    show: {
      handler(val) {
        this.localVisible = val
        // 初始化选中值
        if (val && (!this.currentValue || !this.currentValue.length)) {
          this.currentValue = Array(this.formatColumns.length).fill(0)
        }
      },
      immediate: true
    },
    value: {
      handler(val) {
        // 确保值的长度与列数匹配
        if (Array.isArray(val) && val.length > 0) {
          this.currentValue = [...val]
        } else {
          this.currentValue = Array(this.formatColumns.length).fill(0)
        }
      },
      immediate: true
    },
    localVisible(val) {
      this.$emit('update:show', val)
    }
  },
  methods: {
    // 获取显示文本
    getDisplayValue(item) {
      if (typeof item === 'object' && item !== null) {
        return item[this.valueKey] || ''
      }
      return item
    },
    // 处理选择变化
    onChange(e) {
      const values = e.detail.value
      this.currentValue = values
      this.$emit('change', values)
    },
    // 确认选择
    onConfirm() {
      this.$emit('confirm', this.currentValue)
      this.localVisible = false
    },
    // 取消选择
    onCancel() {
      this.$emit('cancel')
      this.localVisible = false
    },
    // 显示选择器
    showPicker() {
      if (this.showing) return
      this.showing = true
      setTimeout(() => {
        this.visible = true
        this.$emit('open')
      }, 50)
    },
    
    // 隐藏选择器
    hidePicker() {
      if (!this.showing) return
      this.visible = false
      setTimeout(() => {
        this.showing = false
        this.$emit('close')
      }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .fu-picker {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 30rpx;
    background-color: #f7f8fa;
  }
  
  &__title {
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
    font-weight: 500;
  }
  
  &__cancel,
  &__confirm {
    padding: 16rpx;
    font-size: var(--fu-font-size-base);
    color: var(--fu-text-color-secondary);
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &__confirm {
    color: var(--fu-primary-color);
  }
  
  &__body {
    width: 100%;
    height: 220px;
    position: relative;
    background-color: #fff;
  }
  
  &__view {
    width: 100%;
    height: 100%;
  }
  
  &__mask {
    position: relative;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 88px;
      pointer-events: none;
      z-index: 1;
    }
    
    &::before {
      top: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
    }
    
    &::after {
      bottom: 0;
      background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
    }
  }
  
  &__indicator {
    height: 44px!important;
    border-top: 2rpx solid var(--fu-border-color);
    border-bottom: 2rpx solid var(--fu-border-color);
  }
  
  &__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px!important;
    font-size: var(--fu-font-size-base);
    color: var(--fu-text-color);
    padding: 0 8rpx;
    box-sizing: border-box;
  }
}

</style> 